<template>
  <div>
    <!-- 搜索界面 -->
    <div class="home-top">
      <van-row class="search-top">
        <van-col span="4">
          <div class="log">易购</div>
        </van-col>
        <van-col span="20">
          <van-search placeholder="请输入搜索关键词" @click="onSearch" />
        </van-col>
      </van-row>
    </div>
    <!-- 商品分类  Grid导航宫格 -->
    <div class="home-catgory">
      <van-grid :column-num="4" class="product-classification">
        <van-grid-item
          v-for="item in categoryList"
          :key="item.id"
          :icon="item.goodsList[0].list_pic_url"
          :text="item.name"
          @click="onHomeCategory"
        />
      </van-grid>
    </div>
    <!-- 轮播 -->
    <div class="home-banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <img :src="item.image_url" style="width: 100%; height: 200px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 首页滚动标签栏  -->
    <div class="home-tab" >
      <ul>
        <li 
        v-for="(item,index) in categoryList" 
        :key="item.id"
        @click="onScroNav(index)"
        >{{item.name}}</li>
        
      </ul>

      <!-- 展示文本 -->
     
      <!-- 商品列表信息 -->
     <div class="home-tab-bt">
       <div
        class="home_product"
        v-for="item in productList1"
        :key="item.id"
        @click="onProductDetail(item.id)"
      >
        <img :src="item.list_pic_url" alt />
        <div class="home_pro_title">
          <span>生活优选</span>
          <span class="h1">{{ item.name }}</span>
        </div>
        <!-- 商品底部 -->
        <div class="home_pro_bt">
          <h4>￥{{ item.retail_price }}元</h4>
          <!-- 新品vip -->
          <div class="home_pro_bt_vip">
            <span class="first">新品</span>
            <span class="second">VIP</span>
          </div>
          <span>...</span>
        </div>
      </div>
     </div>
    
    </div>
  </div>
</template>

<script>
import { homeBanner } from "@/api/home.js";
import { homeCatalog } from "@/api/home.js";
import { homeProductList } from "@/api/home.js";
export default {
  data() {
    return {
      bannerList: [], //轮播图数据列表
      categoryList: [], //分类导航数据列表
      productList1: [], //品牌详情中的产品列表
      page: 1,
      size: 20,
    };
  },
  async created() {
    // 调用banner数据接口
    let res = await homeBanner();
    let data = res.data;
    console.log(res.data.data);
    this.bannerList = data.data.banner;
    this.categoryList = data.data.categoryList;
    console.log("this.categoryList", this.categoryList);

    let res2 = await homeProductList(this.page, this.size);
    let data2 = res2.data.data.data;
    this.productList1 = data2;
    console.log("品牌产品列表", data2);

  },
  methods: {
    /*滚动导航商品分类事件 ：
    1.绑定点击事件传索引号---实参
    2.将实参赋值给page，获取索引号+1对应的页数数据
    */
  async  onScroNav(index) {
      // alert('111')
      console.log(index);
      this.page=index+1;
 let res = await homeProductList(this.page, this.size);
    let data = res.data.data.data;
    this.productList1 = data;

    },
    onSearch() {
      this.$router.push({ path: "/search" });
    },
    onProductDetail(id) {
      this.$router.push({ path: "/cart/cdetil", query: { id } });
    },
    // 跳转到首页的商品分类详情
    onHomeCategory() {
      this.$router.push({ path: "/home/ctogry" });
    }
  }
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
} // 顶部搜索
.home-top {
  .search-top {
    display: flex;
    align-items: center;
    .log {
      text-align: center;
      color: #ea8360;
      font-size: 0.46rem;
      font-weight: 700;
    }
    .van-search__content {
      border-radius: 0.2rem;
      border: 0.01rem solid #ea8360;
      background: #fff;
    }
  }
}
// 模块2--首页分类导航
.home-catgory {
  /* 分类导航栏高度 */
  height: 2.4rem;
  overflow: hidden;
  margin-bottom: 0.2rem;
  .van-grid {
    .van-grid-item__content {
      padding: 0.1rem 0.08rem;
    }
  }
  // 商品分类模块
  .product-classification {
    margin-bottom: 0.1rem;
  }
}
// 模块3--轮播图
.home-banner {
  margin-bottom: 0.2rem;
  // 轮播
  .van-row {
    margin-bottom: 0.1rem;
    .van-col-banner {
      border-radius: 0.1rem;
      .my-swipe {
        border-radius: 0.1rem;
      }
    }
  }
}

.home-tab {
  // 导航列表
  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin-bottom: 0.2rem; 
    padding-left:0.1rem;
    padding-right:0.1rem;
    li {
      border-right: 0.03rem solid #eee;
  //  background: pink;
     &:hover {
        color: #fff;
        font-size: 0.4rem;
        background: #ea8360;
      }
    }
   
  }
   .home-tab-bt{
      display: flex;
      flex-wrap: wrap;

    }
  //  商品列表信息
  .home_product {
    // float: left;
    width: 45%;
    background: #fff;
    padding-top: 0rem;
    font-size: 0.12rem;
    padding-left: 2%;
    padding-right: 1%;
    margin-bottom: 0.2rem;
    margin-right: 2%;
    border-radius: 0.1rem;
    img {
      margin: 0;
      width: 100%;
      height: 2rem;
      margin-bottom: 0.2rem;
    }
    p {
      margin-bottom: 0.05rem;
    }
    .home_pro_title {
      margin-bottom: 0.2rem;
      .h1 {
        font-size: 0.12rem;
        background: 0;
        color: #000;
      }
      span {
        background: #ea8360;
        border-radius: 0.05rem;
        margin-right: 0.05rem;
        color: #fff;
      }
    }
    .home_pro_bt {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.1rem;
      .home_pro_bt_vip {
        .first {
          background: #263f6b;
          color: #aaa098;
        }
        .second {
          background: #f9ddcb;
          color: #3e2819;
        }
      }
    }
  }
}
</style>
